<template>
  <div class="v_notice">
    <div class="article_div">
          <div class="title clearfix">
              <div class="titleli"><p :class="type==3?'v_p':''" @click="show(3)">文章</p></div>
              <div class="titleli"><p :class="type==4?'v_p':''" @click="show(4)">推广</p></div>
              <div class="titleli"><p :class="type==2?'v_p':''" @click="show(2)">关联</p></div>
              <div class="titleli"><p :class="type==1?'v_p':''" @click="show(1)">系统消息</p></div>
              <div class="titlelir" @click="putNoticeunread()">全部已读</div>
          </div>
          <div class="box">
               <div class="boxrow clearfix" v-for="list in data" v-if="data!=''">
                  <div class="boxrowl"><div v-if="list.read==0">•</div></div>
                  <div class="boxrowr">
                     <p class="rowtext" @click="v_showid(list.id)">{{list.title}}<i  class="el-icon-arrow-right" :class="showid==list.id?'v_i':''"></i></p>
                     <p class="v_rowtext" :class="showid==list.id?'v_show':''">{{list.content}}<a :href="list.href" v-if="list.href!=null">查看详情</a></p>
                     <p class="rowtim">{{list.createTime | stampFormate2}}</p>
                  </div>
               </div>
               <div class="v_hied" v-if="data==''">{{empty}}</div>
               
         
                <!--分页-->
    <div class="v_paging">
        <el-pagination
            background
           layout="total, sizes, prev, pager, next, jumper"
           :current-page.sync="currentPage"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
           :total="inde">
    </el-pagination>
   </div>
          </div>
        
    </div>       
  </div>
</template>

<script>
 import {commonService} from '../../service/commonService'

  export default {
    name: 'app',

    data () {
      return {
        type:3,
        data:'',
        empty:'加载中...',
        // 分页
        currentPage:1,
        inde:1,
        pages:{
           no:1,
           size:10,
        },
        showid:'',
      
      
      }
    },
    mounted(){
       this.getNotice()
    },
    methods: {
      v_showid:function(id){
         if(this.showid==id){
            this.showid=''
         }else{
           this.showid=id
         }

          commonService.putNoticeunread({id:id}).then(function(res){
                 console.log(res)
                    if(res.data.code == 200){
                           
                    }
              })

        
      },

        // 选择
         show:function(index){
            this.type=index
            this.pages.no=1
            this.currentPage=1
          this.getNotice()
         },
          //分页
      handleSizeChange(val){
          this.pages.size=val
          this.getNotice()
      },
      handleCurrentChange(val){
          this.pages.no=val
          this.getNotice()
      },
        //获得列表
      getNotice (){
        let that = this;
        commonService.getNotice({pageNo: that.pages.no, pageSize:that.pages.size,type:that.type}).then(function (res) {
                  if(res.data.code==200){
                     console.log(res)
                          that.data=res.data.datas.records
                        
                          that.inde=res.data.datas.total
                          that.empty='暂无数据'
                  }
        });
      },
      putNoticeunread:function(){
        let that=this
        commonService.putNoticeunread({type:that.type}).then(function(res){
                 console.log(res)
                    if(res.data.code == 200){
                           that.getNotice()
                    }
              })
      },

    },
  }
</script>
<style lang="less" scoped>
  @import url('../../assets/css/base.less');
  .v_notice{
    padding: 20px;
    .article_div{
      // height: 100px;
      background: #fff;
      border: 1px solid #dcdfe6;
      -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
      box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
      
      .v_paging{
         margin-top: 20px;
         text-align: right;
      }
      .title{
            height: 48px;
            background: #F9F9F9;
            box-shadow: inset 0 -1px 0 0 #EEEEEE, inset 0 1px 0 0 #EEEEEE;
            .titleli{
               float: left;
               padding: 0 20px;
               p{ 
                padding:0 10px;
                 color:#666;
                 text-align: center;
                 font-size: 14px;
                 text-align: center;
                 line-height: 46px;
                 cursor: pointer;
                 
               }
               .v_p{
                  color: #f29700;
                  border-bottom: 2px solid #f29700;
                  box-sizing: border-box;

               }
            }
            .titlelir{
               float: right;
               color:#f29700;
               text-align: center;
               font-size: 14px;
               // text-align: center;
               margin-right: 40px;
               line-height: 46px;
               cursor: pointer;

            }
         }
         .box{ 
              min-height: 300px;
              padding-bottom: 20px;
              .v_hied{
                 height: 240px;
                 width: 100%;
                 font-size: 18px;
                 color: #909399;
                 text-align: center;
                 line-height: 240px;
              }
            .boxrow{
               padding: 18px 0;
               background: #FFFFFF;
               box-shadow: inset 0 -1px 0 0 #DDDDDD;
               .boxrowl{
                 float: left;
                 width: 30px;
                 height: 20px;
                 div{
                   color: #FF3831;
                   text-align: center;
                   line-height: 20px;
                 }
               }
               .boxrowr{
                 float: left;
                 width: 94%;
                 .rowtext{
                    font-size: 14px;
                    line-height: 20px;
                    color: #666;
                    width: 100%;
                    cursor: pointer;
                    i{
                       float: right;
                    }
                    .v_i{
                      transform:rotate(90deg);
                    }
                 }
                 .v_rowtext{
                    font-size: 14px;
                    line-height: 20px;
                    color: #666;
                    display: none;
                    a{
                      margin-left: 10px;
                      color:#f29700;
                    }
                 }
                 .v_show{
                    display: block;
                 }
                 .rowtim{
                     margin-top: 8px;
                     font-size: 12px;
                     line-height: 18px;
                     color: #999;
                 }

               }
            }
         }
       
 
}
  }
</style>
